<template>
<div>
    <div class="common-form">
      <span>{{curItem.name}}</span>
    </div>
    <div class="f16 gray3 form-subtitle">{{$t('page.style_setting')}}</div>
    <el-form size="small" :model="curItem" label-width="100px">
      <!--页面标题-->
      <el-form-item :label="$t('page.title_type')">
        <el-radio-group @change="logechange" v-model="curItem.params.titleType">
          <el-radio-button :label="'text'">{{$t('page.text_label')}}</el-radio-button>
          <el-radio-button :label="'image'">{{$t('page.image_only')}}</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <div class="form-item" v-if="curItem.params.titleType == 'image'">
        <div class="form-label">{{$t('page.title_content')}}</div>
        <div class="diy-setpages-cover">
          <img
            v-if="curItem.params.toplogo"
            v-img-url="curItem.params.toplogo"
            alt=""
            @click="$parent.onEditorSelectImage(curItem.params, 'toplogo')"
            :style="'background-color:' + curItem.style.titleBackgroundColor + ' ;'"


          />
          <div>{{$t('page.title_height_tip')}}</div>
        </div>
      </div>
      <div class="form-item" v-if="curItem.params.titleType == 'text'">
        <div class="form-label">{{$t('page.title_content')}}</div>
        <el-input v-model="curItem.params.title"></el-input>
      </div>
      <div class="form-item" v-if="curItem.params.titleType == 'text'">
        <div class="form-label">{{$t('page.logo_text_color')}}</div>
        <div class="flex-1 d-s-c" style="height: 36px">
          <el-color-picker
            size="default"
            v-model="curItem.style.titleTextColor"
          ></el-color-picker>
          <el-input class="ml10" v-model="curItem.style.titleTextColor" />
          <el-button
            style="margin-left: 10px"
            @click.stop="$parent.onEditorResetColor(curItem.style, 'titleTextColor', '#333')"






            type="primary"
            link
            >{{$t('page.reset')}}</el-button
          >
        </div>
      </div>
      <!--页面名称-->
      <div class="form-item" style="margin-bottom: 4px">
        <div class="form-label">{{$t('page.page_name_lang')}}</div>
        <el-input v-model="curItem.params.name"></el-input>
      </div>
      <div class="form-item" style="margin-bottom: 4px">
        <div class="form-label">{{$t('page.page_name_hk')}}</div>
        <el-input v-model="curItem.params.nameHk"></el-input>
      </div>
      <div class="form-item" style="margin-bottom: 4px">
        <div class="form-label">{{$t('page.page_name_en')}}</div>
        <el-input v-model="curItem.params.nameEn"></el-input>
      </div>
      <p
        class="gray"
        style="margin-left: 60px; margin-bottom: 16px; width: auto"
      > {{$t('page.page_name_tip')}} 

</p>
      <!--分享标题-->
      <div class="form-item" style="margin-bottom: 4px">
        <div class="form-label">{{$t('page.share_title_colon')}}</div>
        <el-input v-model="curItem.params.shareTitle"></el-input>
      </div>
      <p
        class="gray"
        style="margin-left: 60px; margin-bottom: 16px; width: auto"
      > {{$t('page.wechat_share_title')}} 

</p>
      <div class="form-item" style="margin-bottom: 4px">
        <div class="form-label">{{$t('page.share_logo')}}</div>
        <div class="diy-notice-icon">
          <img
            :width="40"
            v-img-url="curItem.params.shareImg"
            alt=""
            @click="$parent.onEditorSelectImage(curItem.params, 'shareImg')"
          />
        </div>
      </div>
      <p
        class="gray"
        style="margin-left: 60px; margin-bottom: 16px; width: auto"
      > {{$t('page.wechat_share_logo_tip')}} 

</p>
      <!-- 背景颜色 -->
      <div class="form-item">
        <div class="form-label">{{$t('page.background_color_label')}}</div>
        <div class="flex-1 d-s-c" style="height: 36px">
          <el-color-picker
            size="default"
            v-model="curItem.style.titleBackgroundColor"
          ></el-color-picker>
          <el-input class="ml10" v-model="curItem.style.titleBackgroundColor" />
          <el-button
            style="margin-left: 10px"
            @click.stop="$parent.onEditorResetColor(curItem.style, 'titleBackgroundColor', '#333')"






            type="primary"
            link
          > {{$t('page.reset')}} 

</el-button>
        </div>
      </div>
      <!--商品分类-->
      <div class="form-item" style="margin-bottom: 4px">
        <div class="form-label">{{$t('page.product_category')}}</div>
        <div class="gray9">{{$t('page.only_on_home')}}</div>
      </div>
      <el-form-item label=" ">
        <el-radio-group
          @change="categorychange"
          v-model="curItem.category.open"
        >
          <el-radio-button :label="1">{{$t('page.enabled')}}</el-radio-button>
          <el-radio-button :label="0">{{$t('page.disabled')}}</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <!-- 分类颜色 -->
      <div class="form-item">
        <div class="form-label">{{$t('page.category_color')}}</div>
        <div class="flex-1 d-s-c" style="height: 36px">
          <el-color-picker
            size="default"
            v-model="curItem.category.color"
          ></el-color-picker>
          <el-input class="ml10" v-model="curItem.category.color" />
          <el-button
            style="margin-left: 10px"
            @click.stop="$parent.onEditorResetColor(curItem.category, 'color', '#ffffff')"


            type="primary"
            link
            >{{$t('page.reset')}}</el-button
          >
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      logo_type: "image"
    };
  },
  props: ["curItem", "selectedIndex", "opts"],
  created() {},
  methods: {
    logechange(e) {
      console.log(e);
      this.curItem.params.titleType = e;
    },
    categorychange(e) {
      this.curItem.category.open = e;
    }
  }
};
</script>

<style lang="scss" scoped>
.diy-setpages-cover > img {
  width: 60px;
  height: 60px;
}
</style>

